<template>
    <el-container>
  <el-header>
    <div id="title">课程班级</div>
                <div><i class="el-icon-search" id="icon" ></i></div>
                <el-input v-model="input" placeholder="搜索课程" id="input"></el-input>
                <div id="jia">加入班级</div>
                <div id="tong">通知</div>
                <div><i class="el-icon-user-solid" id="icon1" @click="handleicon"></i></div>
  </el-header>
  <el-main style="background-color: white;">
    <div id="T1">{{ this.name }}</div>
    <div id="T2">
            <el-button type="primary" round v-if="this.type=='提交中'">提交中</el-button>
            <el-button type="success" round v-if="this.type=='补交中'">补交中</el-button>
            <el-button type="danger" round v-if="this.type=='已截至'">已截至</el-button>
    </div>
    <div id="T3">作业内容</div>
    <div id="T4" @click="PiGai(id)">老师评价</div>
    <div id="T5">{{ content }}</div>
  </el-main>
</el-container>
</template>
<style>
#T5{
        border: 1px solid;
        height: 45%;
        width: 70%;
        position: absolute;
        left: 15%;
        top: 43%;
        padding: 5px;
        text-align: left;
    }
#T4{
        border: 1px solid black;
        background-color: rgb(255，255，255);
        height: 70px;
        width: 140px;
        position: absolute;
        top: 230px;
        left: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
#T3{
        border: 1px solid black;
        background-color: rgb(135, 237, 237);
        height: 70px;
        width: 140px;
        position: absolute;
        top: 230px;
        left: 5%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
    }
#T2{
        position: absolute;
        top: 15%;
        left: 16%;
    }
#T1{
        font-size: 30px;
        font-weight: 700;
        position: absolute;
        top: 15%;
        left:5%
    }
.grid-cotainer{
    display:grid;
    grid-template-columns: repeat(3,300px);
    grid-gap:50px;
}
.grid-item{
    padding: 20px;
    border:1px solid;
    border-radius: 5px;
}
  .el-col {
    border-radius: 4px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .bg-purple-light {
    background: #0c2152;
  }
  .bg-purple-dark {
    background: #830608;
  }
  .el-header{
    background-color: rgb(85,85,85);
    color: #333;
    text-align: center;
    line-height: 80px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  #title{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:80px;
  }
  #icon{
    color: white;
    font-size: 25px;
    position: absolute;
    top:30px;
    left:700px;
  }
  #input{
    height:33px;
    width:230px;
    position: absolute;
    top:-30px;
    left:700px;
  }
  #jia{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1000px;
  }
  #tong{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1200px;
  }
  #icon1{
    color: white;
    font-size:40px;
    position: absolute;
    top:20px;
    left: 1350px;
  }
</style>
<script>
import axios from 'axios'
export default {
    data(){
        return{
          content:'',
          assessment:'',
          grade:'',
          name:'',
          type:'',
          id:'',
          courseid:'',
          taskid:''
        }
    },
    methods:{
          handleicon(){
            this.$router.push('/StuPage')
          },
          PiGai(id){
                this.$router.push({
                    name:'PiGai',
                    params:{
                        id:id,
                        taskid:this.taskid,
                        courseid:this.courseid
                    }
                })
          },
    },
    mounted(){
            this.id=this.$route.params.id
            this.taskid=this.$route.params.taskid
            this.courseid=this.$route.params.courseid
            //传出 id-学生id courseid-课程id taskid-任务id
            //返回 content：学生提交的内容 assessment-老师的评价 grade-评分 name-任务名 type-任务状态（已截至，提交中，补交中）
            axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/244515723',{
            id:this.id,
            courseid:this.courseid,
            taskid:this.taskid
          }).then(res=>{
            this.content=res.data.content
            this.assessment=res.data.assessment
            this.grade=res.data.grade
            this.name=res.data.name
            this.type=res.data.type
          })
        }
}
</script>